<template>
  <div class="VR-scene-list-container">
    <div class="title">
      VR场景列表
      <div class="title-btn">
        <div class="left">
          <el-button type="primary" @click="handleAddScene" style="margin-left:10px">新增</el-button>
          <el-button type="primary" @click="handleSave" style="margin-left:10px">保存并打印json</el-button>
          <el-button type="primary" @click="handlePreview()" title="预览你编辑后的效果" style="margin-left:10px">预览</el-button>
          <!-- <el-button type @click="handlePreviewAll()" title="预览当前项目文件夹里的所有场景图" style="margin-left:10px">预览本地</el-button> -->
          <!-- <el-button type @click="handlePreviewOnline()" title="将json覆盖到线上后的效果" style="margin-left:10px">预览线上</el-button> -->
        </div>

        <div class="right">
          <el-button type="primary" @click="handleReset" style="margin-left:10px">重置数据</el-button>
          <!-- <el-button type="primary" @click="handlelog()" style="margin-left:10px">打印线上json</el-button> -->
        </div>
      </div>
    </div>
    <div class="search-params">
      <div class="left-btn">
        <el-tree-select style="margin-right: 10px;" v-model="queryData.typeId" placeholder="选择所属上级场景" :filter-node-method="filterNodeMethod" filterable :data="tableDataTree" default-expand-all :props="menuTreeSelectProps" :check-strictly="true" @change="handleCurFormSceneTypeChange">
          <template #default="{ data }">
            <div class="custom-tree-node">
              <span>{{ data.title }}</span>
              <i class="iconfont icon-xiugai" @click="handleSceneTypeFormEdit(data)"></i>
            </div>
          </template>
        </el-tree-select>
        <!-- 筛选条件集合 -->
        <SearchCmp ref="searchCmpRef" v-if="searchCmpArray.length" :searchCmpArray="searchCmpArray" :searchForm="queryData" @onSubmit="handleSearh" />
      </div>
      <div class="right-btn">
        <div class="change-card">
          <el-tooltip content="卡片列表" placement="bottom" effect="light">
            <a :class="{'active': tableType === 'card'}" href="javascript:;" @click="changeTable('card')">
              <i class="iconfont">&#xe6c9;</i>
            </a>
          </el-tooltip>
          <el-tooltip content="文字表格" placement="bottom" effect="light">
            <a :class="{'active': tableType === 'table'}" href="javascript:;" @click="changeTable('table')">
              <i class="iconfont">&#xe6ca;</i>
            </a>
          </el-tooltip>
        </div>
      </div>
    </div>

    <div class="section-list">
      <div class="ruifox-list" v-loading="tableLoading" v-if="tableType == 'card'">
        <!-- <Transition name="table" mode="out-in"> -->
        <!-- 卡片模式 -->
        <div class="wechat-card-box2 wechat-card-table">
          <div class="wechat-card" :class="{'card-focus': element.id === showCardOptions.id && showCardOptions.show}" v-for="(element, index) in paginatedTableData" :key="element.id" @mouseenter="showOptions(element.id)" @mouseleave="closeOptions()">
            <div class="wechat-card-sn">
              <div class="card-checkbox" v-if="element.id === showCardOptions.id && showCardOptions.show || element.checked">
                <el-checkbox class="unmover" v-model="element.checked" @change="handleCheckTable(element.id)" size="large" />
              </div>
              <div class="index" style="color: #666" v-if="!(element.id === showCardOptions.id && showCardOptions.show || element.checked)">{{index + 1}}</div>
            </div>
            <div class="wechat-thumb">
              <img :src="element.thumbUrl || element.VRImg" alt />
            </div>
            <div class="wechat-card-title">
              <div class="card-title-top">
                <div class="card-title-btn-box">
                  <span class="model-tip">
                    <i class="iconfont" :class="element.model_icon"></i>
                  </span>
                </div>
                <p :title="element.title.replace(/<[^>]+>/g,'')" class="unmover">
                  <a href="javascript:;">{{element.title.replace(/<[^>]+>/g,"")}}</a>
                </p>
              </div>
              <div class="card-title-bottom">
                <div class="title-tips">
                  <span v-if="element.publishTime" title="发布时间">
                    <i class="iconfont">&#xe6f0;</i>
                    {{element.publishTime}}
                  </span>
                  <span v-if="element.comefrom" title="来源部门">
                    <i class="iconfont">&#xe6e1;</i>
                    {{element.comefrom}}
                  </span>
                  <span v-if="element.author" title="作者">
                    <i class="iconfont">&#xe6e3;</i>
                    {{element.author}}
                  </span>
                </div>
                <div class="tags-platform">
                  <!-- 标签 -->
                  <div class="tags"></div>
                  <template v-for="(item,aindex) in element.platform" :key="aindex">
                    <span :title="citem" v-for="(citem,cindex) in item.mediaList" :key="cindex">
                      <i class="iconfont wechat" v-if="item.media == 'wechat'">&#xe6b8;</i>
                    </span>
                  </template>
                </div>
              </div>
            </div>
            <!-- <Transition name="options"> -->
            <div class="ruifox-card-options unmover" v-if="element.id === showCardOptions.id && showCardOptions.show">
              <div class="inner-card-options" v-if="element.id === showCardOptions.id">
                <el-button class="option-btn" text size="small" @click="handleEdit(element)">
                  <i class="iconfont">&#xe6e6;</i>
                  编辑
                </el-button>
                <el-button class="option-btn" text size="small" @click="handleSetting(element)">
                  <i class="iconfont">&#xe6e6;</i>
                  配置
                </el-button>
                <el-dropdown>
                  <el-button class="more-btn" text size="small">
                    <i class="iconfont">&#xe6dc;</i>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item type="primary" plain size="small" @click="handlePreview(element)">
                        <i class="iconfont">&#xe6ed;</i>预览
                      </el-dropdown-item>
                      <el-dropdown-item type="primary" plain size="small" @click="handleDeleteScene(element)">
                        <i class="iconfont">&#xe6ed;</i>删除
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
            <!-- </Transition> -->
          </div>
          <!-- 防止justify-content: space-between; -->
          <div style="width: calc((100% - 30px) / 4); height: 0" v-for="n in 3" :key="n"></div>
        </div>
        <!-- </Transition> -->
        <template v-if="paginatedTableData.length === 0">
          <div class="no-data">
            <i class="iconfont">&#xe642;</i>
            <span>暂无数据</span>
          </div>
        </template>
        <!-- 添加分页器 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="tableData.value.length"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
          />
        </div>
      </div>
      <!-- 表格模式 -->
      <RuifoxTable v-else :loading="tableLoading" :default-index="true"
       :default-checkbox="true"
        v-model:tableData="paginatedTableData" v-model:fieldList="fieldList">
        <!-- 多选 -->
        <template #default-checkbox="{element}">
          <div class="table-div-check">
            <el-checkbox class="unmover" v-model="element.checked" @change="handleCheckTable(element.id)" size />
          </div>
        </template>
        <!-- <template #VRImg='{element}'>
           <el-popover @show="popoverBeforeEnter(element)" placement='top'>
            <template #reference>
              <div class="thumb-box" style="max-width: 42px;height: 24px; margin-right:5px" v-if="element.thumbUrl || element.VRImg">
                <img :src="getCutImg(element.thumbUrl || element.VRImg)" alt="" style="max-width: 100%;max-height: 100%">
              </div>
             </template>
            <template #default>
              <div v-if="curImgId == element.id" class="thumb-box" style="max-width: 150px;max-height: 300px">
                <img :src="getCutImg(element.thumbUrl || element.VRImg)" alt="" style="width: 100%;height: 100%">
              </div>
            </template> 
          </el-popover>
        </template>-->
        <template #title="{element}">
          <div class="wechat-card-title">
            <div class="card-title-top">
              <p :title="element.title.replace(/<[^>]+>/g,'')" class="unmover">
                <a href="javascript:;">{{element.title.replace(/<[^>]+>/g,"")}}</a>
              </p>
            </div>
          </div>
        </template>
        <!-- 状态 -->
        <template #status="{element}">
          <el-tag v-if="element.status === 0" type="info">未启用</el-tag>
          <el-tag v-if="element.status === 1" type="success">已启用</el-tag>
        </template>
        <template #options="{element}">
          <div class="table-td-option">
            <el-button type="primary" link @click="handleEdit(element)">编辑</el-button>
            <el-button type="primary" link @click="handleSetting(element)">配置</el-button>
            <el-dropdown>
              <span class="el-dropdown-link unmover">
                <i class="iconfont">&#xe78d;</i>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item type="primary" plain size="small" @click="handlePreview(element)">预览</el-dropdown-item>
                  <el-dropdown-item type="primary" plain size="small" @click="handleDeleteScene(element)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
        
      </RuifoxTable>
    </div>
    <!-- 添加分页器 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="tableData.length"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>
    <!-- 编辑场景信息弹框 -->
    <el-dialog v-model="showSceneDialog" :title="sceneTitle" width="750px" align-center>
      <el-form :model="sceneForm" ref="sceneEditFormRef" :rules="sceneEditRules" label-width="120px" class="scene-edit-form">
        <el-form-item label="上级场景:" prop="pid">
          <el-tree-select v-model="sceneForm.pid" placeholder="选择所属上级场景" :filter-node-method="filterNodeMethod" filterable :data="tableDataTree" default-expand-all :props="menuTreeSelectProps" :check-strictly="true"></el-tree-select>
        </el-form-item>
        <el-form-item label="场景名称:" prop="title">
          <el-input v-model="sceneForm.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="场景描述:">
          <el-input v-model="sceneForm.description" type="textarea" placeholder="请输入描述" />
        </el-form-item>
        <template v-if="sceneForm.type == 2">
          <!-- VRImg -->
          <el-form-item label="VR场景图:" prop>
            <div class="VR-ico-box">
              <div class="VR-ico" v-if="sceneForm.VRImg">
                <img :src="sceneForm.VRImg" alt />
                <div class="icon-box" @click="handleFileDelete(sceneForm,'VRImg')">
                  <i class="iconfont">&#xe74b;</i>
                </div>
              </div>
              <!-- <el-button link type="primary" v-if="sceneForm.VRImg" @click="handleUploadImg('VRImg')">重新上传</el-button> -->
              <!-- <el-button size="small" v-else @click="handleUploadImg('VRImg')">上传图片</el-button> -->
              <VRUpload v-else v-model:fileUrl="sceneForm.VRImg">
                <template #default-text>
                  <span v-if="sceneForm.VRImg">重新上传</span>
                  <span v-else>上传</span>
                </template>
              </VRUpload>
            </div>
          </el-form-item>
          <el-form-item>
            <template #label>
              <div class="slot-label">
                封面图
                <PopoverTip :content="'若不设置，将以“VR场景图”作封面图'" />:
              </div>
            </template>
            <div class="VR-ico-box">
              <div class="VR-ico" v-if="sceneForm.thumbUrl">
                <img :src="sceneForm.thumbUrl" alt />
                <div class="icon-box" @click="handleFileDelete(sceneForm,'thumbUrl')">
                  <i class="iconfont">&#xe74b;</i>
                </div>
              </div>
              <!-- <el-button link type="primary" v-if="sceneForm.thumbUrl" @click="handleUploadImg('thumbUrl')">重新上传</el-button> -->
              <!-- <el-button size="small" v-else @click="handleUploadImg('thumbUrl')">上传图片</el-button> -->
              <VRUpload v-model:fileUrl="sceneForm.thumbUrl">
                <template #default-text>
                  <span v-if="sceneForm.thumbUrl">重新上传</span>
                  <span v-else>上传</span>
                </template>
              </VRUpload>
            </div>
          </el-form-item>
          <!-- <el-form-item label="背景音乐:">
            <div class="VR-audio-box">
              <div class="VR-audio" v-if="sceneForm.bgsound">
                <audio controls ref="audio" class="aud">
                  <source :src="sceneForm.bgsound" />
                </audio>
                <div class="icon-box" @click="handleFileDelete(sceneForm,'bgsound')">
                  <i class="iconfont">&#xe74b;</i>
                </div>
              </div>
              <el-button link type="primary" v-if="sceneForm.bgsound" @click="handleUploadAudio()">重新上传</el-button>
              <el-button size="small" v-else @click="handleUploadAudio()">上传mp3</el-button>
            </div>
          </el-form-item> -->
        </template>
        <el-form-item label="是否启用:">
          <el-switch v-model="sceneForm.status" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <el-form-item label="场景类型:" prop="type">
          <el-radio-group v-model="sceneForm.type">
            <el-radio :label="1" border :disabled="sceneForm.id != undefined">场景分类</el-radio>
            <el-radio :label="2" border :disabled="sceneForm.id != undefined" style="margin-left: 10px">场景页面</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showSceneDialog = false">取消</el-button>
          <el-button type="primary" @click="handleSceneFormSubmit(sceneEditFormRef)">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 场景分类修改弹框 -->
    <el-dialog v-model="showSceneTypeEditDialog" title="编辑" width="750px">
      <el-form :model="sceneTypeForm" ref="sceneTypeFormRef" :rules="sceneEditRules" label-width="120px" class="scene-edit-form">
        <!-- <el-form-item label="当前分类:">
          <el-tree-select
              v-model="queryData.typeId"
              placeholder="选择所属上级场景"
              :filter-node-method="filterNodeMethod"
              filterable
              :data="tableDataTree"
              default-expand-all
              :props="menuTreeSelectProps"
              :check-strictly="true"
              @change="handleSceneTypeChange"
          ></el-tree-select>
        </el-form-item>-->
        <el-form-item label="场景名称:" prop="title">
          <el-input v-model="sceneTypeForm.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="场景描述:">
          <el-input v-model="sceneTypeForm.description" type="textarea" placeholder="请输入描述" />
        </el-form-item>
        <el-form-item label="是否启用:">
          <el-switch v-model="sceneTypeForm.status" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <el-form-item label="场景类型:" prop="type">
          <el-radio-group v-model="sceneTypeForm.type">
            <el-radio :label="1" border>场景分类</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="danger" @click="handleSceneTypeDelete()">删除</el-button>
          <el-button @click="showSceneTypeEditDialog = false">取消</el-button>
          <el-button type="primary" @click="handleSceneTypeFormSubmit(sceneTypeFormRef)">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
/* eslint-disable */
import { ref, reactive, computed } from 'vue'
import { myDebounce } from '@/utils/tools'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useStore } from 'vuex'
import { VRTree } from './test_cq7.js'
import VRUpload from './components/VRUpload.vue'

const store = useStore()
const router = useRouter()
const menuTreeSelectProps = {
  children: 'children',
  label: 'title',
  value: 'id',
}
const statusOptions = ref([
  { label: '全部', value: null },
  { label: '已启用', value: 1 },
  { label: '已停用', value: 2 },
])
const defaultQueryData = {
  total: 0,
  pageSize: 50,
  currentPage: 1,
  isAll: false, //是否查全部（不分页）
  keywords: '', //关键词
  publishTime: [], //发布时间
  status: null, //场景状态 0未启用 1已启用 null全部
  typeId: '0', //场景分类id，查询当前分类及下面的所有场景图,不传或传0则查全部
  options: [
    {
      name: '删除',
      icon: '&#xe74b;',
      value: 1,
    },
    {
      name: '禁用',
      icon: '&#xe6ea;',
      value: 2,
    },
    {
      name: '启用',
      icon: '&#xe6ea;',
      value: 3,
    },
  ],
}
// 分页参数
const queryData = reactive(Object.assign({}, defaultQueryData))
const tableDataTree = ref()
const tableData = ref([])
const defualtSceneTypeForm = {
  //场景分类字段
  pid: '',
  title: '', //标题
  type: 1, //1场景分类 2场景页面
  sceneList: [], //场景图列表
  thumbUrl: '', // 封面图
  status: 1, //状态 0未启用 1已启用
  children: [],
}
const defualtSceneForm = {
  //场景图字段
  pid: null,
  type: 2, //1场景分类 2场景页面
  title: '', //标题
  description: '', //描述
  status: 1, //状态 0未启用 1已启用
  thumbUrl: '', //封面图
  logo: '', //场景logo
  VRImg: '', //VR图
  publishTime: '', //发布时间
  author: '', //发布人
  bgsound: '', //背景音乐
  markerList: [], //锚点列表
  isFirst: false, //是否作为首图
}
const sceneForm = ref({})
// 递归获取列表 本地
const getFlatListByPid = (arr, pid, flag = false) => {
  arr.forEach((item) => {
    if (item.id == pid || flag) {
      tableData.value = tableData.value.concat(item.sceneList)
      if (item.children?.length > 0) {
        getFlatListByPid(item.children, pid, true)
      }
    } else if (item.children?.length > 0) {
      getFlatListByPid(item.children, pid)
    }
  })
}
const isRealTest = store.state.VR.isRealTest //是否真实测试本地数据
console.log('isRealTest',isRealTest);

// 获取树形数据
const getVRTree = async () => {
  let locSceneListTree = JSON.parse(localStorage.getItem('test-VR-tree'))
  if (locSceneListTree?.length > 0) {
    tableDataTree.value = locSceneListTree
  } else {
    tableDataTree.value =  VRTree
  }
}

// 获取场景图列表
const tableLoading = ref(false)
const getTableList = async () => {
  tableLoading.value = true
  tableData.value = []
  getFlatListByPid(tableDataTree.value, queryData.typeId)
  queryData.total = tableData.value.length
  tableLoading.value = false
}

// VR初始化
const init = () => {
  getVRTree()
  getTableList()
}
init()

// 选择场景类型 获取场景页面
const handleCurFormSceneTypeChange = (val) => {
  tableData.value = []
  getFlatListByPid(tableDataTree.value, val)
}
handleCurFormSceneTypeChange
// 搜索
const handleSearh = () => {
  queryData.currentPage = 1
  getTableList()
}
// 删除分类
const handleSceneTypeDelete = () => {
  ElMessageBox.confirm(`<div><p style="font-size: 14px;">是否确认删除“${sceneTypeForm.value.title}”？</p></div>`, '提示', {
    dangerouslyUseHTMLString: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(() => {
    if (queryData?.id) {
      deepDeleteSceneTypeById(tableDataTree.value, queryData.typeId)
      queryData.typeId = '0' //初始化场景分类条件
      ElMessage({
        message: '删除成功',
        type: 'success',
      })
      showSceneTypeEditDialog.value = false
    }
  })
}
// 根据id递归查找删除
const deepDeleteSceneTypeById = (arr, id) => {
  for (let index = 0; index < arr.length; index++) {
    const element = arr[index]
    if (element.id == id) {
      arr.splice(index, 1)
    } else if (element.children?.length) {
      deepDeleteSceneTypeById(element.children, id)
    }
  }
}
// 根据id递归查找删除场景图
const deepDeleteSceneImgById = (arr, id, finished = false) => {
  for (let index = 0; index < arr.length; index++) {
    const element = arr[index]
    if (element.sceneList?.length) {
      element.sceneList.forEach((ele, eleIndex) => {
        if (ele.id == id) {
          element.sceneList.splice(eleIndex, 1)
          finished = true
        }
      })
    }
    if (element.children?.length && !finished) {
      deepDeleteSceneImgById(element.children, id, finished)
    }
  }
}
// 重置
const reset = () => {
  Object.assign(queryData, defaultQueryData)
  handleSearh()
}
reset
// 添加场景
const sceneTitle = ref('添加')
const showSceneDialog = ref(false)
const handleAddScene = () => {
  sceneForm.value = structuredClone(defualtSceneForm)
  showSceneDialog.value = true
}
const showCardOptions = reactive({
  id: 0,
  show: false,
})
const _showOptions = (id) => {
  if (store.getters.isScroll) return
  showCardOptions.id = id
  showCardOptions.show = true
}
const showOptions = myDebounce(_showOptions, 70)
const _closeOptions = () => {
  showCardOptions.show = false
}
const closeOptions = myDebounce(_closeOptions, 20)

// 编辑
const handleEdit = (row) => {
  sceneForm.value = row
  sceneForm.value = row
  showSceneDialog.value = true
}

const sceneEditFormRef = ref()
const sceneEditRules = ref({
  pid: [{ required: true, message: '请选择上级场景', trigger: 'blur' }],
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  VRImg: [{ required: true, message: '请上传场景图', trigger: 'blur' }],
})
// 表单提交
const handleSceneFormSubmit = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid) => {
    if (valid) {
      if (sceneForm.value.id != undefined) {
        //编辑
        deepGetSceneTypeByPid(tableDataTree.value, sceneForm.value.pid)
        let curImgIndex = curScene.value.sceneList.findIndex((item) => item.id == sceneForm.value.id)
        // 如果找到了对应的项，则替换它
        if (curImgIndex !== -1) {
          curScene.value.sceneList.splice(curImgIndex, 1, sceneForm.value)
        }
      } else {
        //添加
        sceneForm.value.id = new Date().getTime()
        deepGetSceneTypeByPid(tableDataTree.value, sceneForm.value.pid)
        if (sceneForm.value.type == 1) {
          //场景分类
          sceneForm.value.sceneList = []
          sceneForm.value.children = []
          curScene.value.children.push(sceneForm.value)
        } else {
          //场景页面
          curScene.value.sceneList.push(sceneForm.value)
        }
      }
      handleSave()
      getTableList()
      showSceneDialog.value = false
    }
  })
}
// 根据pid递归获取场景类型信息
const curScene = ref()
const deepGetSceneTypeByPid = (arr, id) => {
  for (let index = 0; index < arr.length; index++) {
    let item = arr[index]
    if (item.id == id) {
      curScene.value = item
      return
    } else if (item.children?.length > 0) {
      deepGetSceneTypeByPid(item.children, id)
    }
  }
}
// 删除场景
const handleDeleteScene = (row) => {
  ElMessageBox.confirm('<div><p style="font-size: 14px;">是否确认删除？</p></div>', '提示', {
    dangerouslyUseHTMLString: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(async () => {
    let ids, isAllChoose
    if (row) {
      ids = [row.id]
      isAllChoose = false
    } else {
      ids = CheckedList.value
      isAllChoose = isAllSearch.value
    }
    console.log('ids', ids, isAllChoose)
    ids.forEach((id) => {
      let index = tableData.value.findIndex((item) => item.id === id)
      tableData.value.splice(index, 1)
    })
    deepDeleteSceneImgById(tableDataTree.value, row.id)
    handleSave()
    ElMessage({
      message: '删除成功',
      type: 'success',
    })
  })
}
// 配置
const handleSetting = (row) => {
  // window.open(url.href, '_blank')
  router.push({
    path: '/VRSetting',
    query: {
      sceneId: row.id,
    },
  })
}
// 预览
const handlePreview = (row) => {
  if (row) {
    let url = router.resolve({ path: '/VRLocPreview', query: { sceneId: row.id } })
    window.open(url.href, '_blank')
  } else {
    let url = router.resolve({ path: '/VRLocPreview' })
    window.open(url.href, '_blank')
  }
}
// 预览所有本地图
const handlePreviewAll = (row) => {
  let url = router.resolve({ path: '/VRLocPreview', query: { isAll: true } })
  window.open(url.href, '_blank')
}
const handlePreviewOnline = () => {
  let url = router.resolve({ path: '/VRLocPreview', query: { isOnline: true } })
  window.open(url.href, '_blank')
}

// const handlelog = () => {
//   console.log('data', tableDataTree.value)
//   console.log('realVRTree', JSON.stringify(tableDataTree.value))
//   console.log('VRList', JSON.stringify(tableData.value))
// }
// 上传图片
const showImgUpload = ref(false)
const curImgType = ref('')
const handleUploadImg = (type) => {
  curImgType.value = type
  showImgUpload.value = true
}
const getImage = (data) => {
  sceneForm.value[curImgType.value] = data[0].url
}
// 上传音频
const showAudioUpload = ref(false)
const handleUploadAudio = () => {
  showAudioUpload.value = true
}
const getAudio = (data) => {
  sceneForm.value.bgsound = data[0].url
}
// 删除图片
const handleFileDelete = (form, key) => {
  ElMessageBox.confirm('<div><p style="font-size: 14px;">是否确认删除？</p></div>', '提示', {
    dangerouslyUseHTMLString: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(() => {
    form[key] = ''
  })
}
const handleSave = () => {
  console.log('当前数', JSON.stringify(tableDataTree.value));
  
  localStorage.setItem('test-VR-tree', JSON.stringify(tableDataTree.value))
  getTableList()
  console.log('realVRTree', JSON.stringify(tableDataTree.value))
  // console.log('VRList', JSON.stringify(tableData.value))
  ElMessage({
    message: '已保存',
    type: 'success',
  })
}
const handleReset = () => {
  ElMessageBox.confirm('<div><p style="font-size: 14px;">是否确认重置？</p></div>', '提示', {
    dangerouslyUseHTMLString: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(() => {
    localStorage.removeItem('test-VR-tree')
    getVRTree()
    getTableList()
    ElMessage({
      message: '已重置',
      type: 'success',
    })
    localStorage.setItem('test-VR-tree', JSON.stringify(tableDataTree.value))
  })
}
// 场景分类对条件进行筛选
const filterNodeMethod = (value, data) => data.title.includes(value)
// 编辑场景分类
const showSceneTypeEditDialog = ref(false)
const sceneTypeForm = ref(JSON.parse(JSON.stringify(defualtSceneTypeForm)))
const sceneTypeFormRef = ref()
// 编辑场景分类
const handleSceneTypeFormEdit = (data) => {
  deepGetSceneTypeByPid(tableDataTree.value, data.id)
  sceneTypeForm.value = curScene.value
  showSceneTypeEditDialog.value = true
}
const handleSceneTypeFormSubmit = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      showSceneTypeEditDialog.value = false
      ElMessage({
        message: '操作成功',
        type: 'success',
      })
    }
  })
}

const getCutImg = (filename) => {
  let nameWithoutExtension = filename.slice(0, -4)
  // 拼接新的文件名
  // let newFilename = nameWithoutExtension + '_1000_0_2500' + '.jpg';
  let newFilename = nameWithoutExtension + '' + '.jpg'
  return newFilename
}

const searchCmpArray = ref([
  { label: '智能匹配', key: 'keywords' },
  // { label: '场景分类', key: 'typeId' },
  { label: '场景状态', key: 'status', form_type: 'select', options: statusOptions.value },
  { label: '发布时间', key: 'publishTime', form_type: 'datetime' },
])

const tableType = ref('table')
const changeTable = (type) => {
  tableType.value = type
}

const fieldList = ref([
  // {
  //   title: '封面图',
  //   name: 'VRImg',
  // },
  {
    title: '标题',
    minWidth: 200,
    name: 'title',
    showTextTip: true,
  },
  {
    title: '状态',
    name: 'status',
  },
  {
    title: '发布时间',
    name: 'publishTime',
  },
  {
    title: '创建人',
    name: 'author',
  },
  {
    title: '操作',
    width: 150,
    fixed: 'right',
    name: 'options',
  },
])

const curImgId = ref(null)
const popoverBeforeEnter = (data) => {
  curImgId.value = data.id
}

// 在 script setup 中添加分页相关的响应式数据
const currentPage = ref(1)
const pageSize = ref(10)

// 计算当前页的数据
const paginatedTableData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return tableData.value.slice(start, end)
})

// 添加分页事件处理函数
const handlePageChange = (page) => {
  currentPage.value = page
}

const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1 // 重置到第一页
}
</script>
<style scoped lang='scss'>
.VR-scene-list-container {
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 20px 20px;
  .search-params {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .left-btn {
      display: flex;
      align-items: center;
    }
    .right-btn {
      display: flex;
      align-items: center;
      .change-card {
        height: 32px;
        width: 64px;
        box-sizing: border-box;
        border: var(--el-border);
        border-radius: 4px;
        display: flex;
        overflow: hidden;
        margin-left: 20px;
        a {
          display: flex;
          width: 50%;
          height: 100%;
          align-items: center;
          justify-content: center;
        }
        a.active {
          background-color: $mainColor;
          i {
            color: #fff;
          }
        }
      }
    }
  }
  .title {
    font-size: 18px;
    font-weight: bold;
    margin-right: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    .title-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
      }
      .right {
        display: flex;
        align-items: center;
      }
    }
  }
  .bottom-btn {
    margin-bottom: 20px;
  }
  .scene-edit-form {
    width: 100%;
    .VR-ico-box {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-direction: column;
      .VR-ico {
        height: 150px;
        margin-right: 5px;
        position: relative;
        img {
          height: 100%;
        }
        .icon-box {
          position: absolute;
          width: 20px;
          height: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          top: 3px;
          right: 3px;
          background: $failColor;
          padding: 3px 2px;
          border-radius: 2px;
          visibility: hidden;
          cursor: pointer;
          i {
            font-size: 16px;
            color: #fff;
          }
        }
      }
      &:hover {
        .VR-ico {
          .icon-box {
            visibility: inherit;
          }
        }
      }
    }
    .VR-audio-box {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-direction: column;
      .VR-audio {
        margin-right: 5px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .icon-box {
          width: 20px;
          height: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: $failColor;
          padding: 3px 2px;
          border-radius: 2px;
          cursor: pointer;
          margin-left: 10px;
          visibility: hidden;
          i {
            font-size: 16px;
            color: #fff;
          }
        }
        &:hover {
          .icon-box {
            visibility: inherit;
          }
        }
      }
    }
  }
}
.section-list {
  .wechat-card-box2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    min-width: 1000px;
    .wechat-card {
      width: calc((100% - 30px) / 4);
      margin-top: 10px;
    }
  }
}
.slot-label {
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-tree-node {
  .custom-tree-node {
    position: relative;
    i {
      position: absolute;
      top: 0;
      right: -16px;
      font-size: 16px;
      color: $mainColor;
      visibility: hidden;
    }
    &:hover {
      i {
        visibility: initial;
      }
    }
  }
} //融媒体卡片样式
.wechat-card-box2 {
  .wechat-card {
    box-sizing: border-box;
    background-color: $white;
    height: 100px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    padding: 15px 20px 15px 10px;
    overflow: hidden;
    position: relative;
    transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s;
    &.card-focus {
      background-color: $focusContent;
      border-color: $hoverColor;
      box-shadow: 0 0 10px $focusContent;
    }
    .wechat-card-sn {
      width: 16px;
      margin-right: 10px;
      position: relative;
      z-index: 1;
    }
    .wechat-thumb {
      width: 90px;
      height: 60px;
      margin-right: 20px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .wechat-card-title {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .card-title-top {
        display: flex;
        span.model-tip {
          display: block;
          box-sizing: border-box;
          height: 20px;
          line-height: 20px;
          color: $mainColor;
          margin-right: 10px;
          i {
            font-size: 20px;
          }
        }
        p {
          @include textEllipsis(20px, 1);
          font-size: 16px;
          a {
            text-decoration: none;
          }
        }
      }
      .card-title-bottom {
        margin-top: 15px;
        .title-tips {
          span {
            margin-right: 10px;
            font-size: 14px;
            color: $black_tips;
          }
        }
        .tags-platform {
          display: flex;
          align-items: center;
          margin-top: 15px;
          .tags {
            // margin-right: 20px;
          }
          & > span {
            i {
              font-size: 14px;
              line-height: 1;
              margin-right: 10px;
              &.wechat {
                color: #43a677;
              }
            }
          }
        }
      }
    }
    .wechat-card-state {
      height: 60px;
      display: flex;
      justify-content: space-between;
      flex-direction: column-reverse;
      position: absolute;
      right: 20px;
      .card-state-top {
        display: flex;
        p.ready-time {
          font-size: 14px;
          color: #aaaaaa;
          margin-right: 10px;
          u {
            text-decoration: none;
            color: #ff5240;
          }
        }
        span {
          display: block;
          height: 22px;
          font-size: 14px;
          color: $white;
          line-height: 22px;
          padding: 0 5px;
          border-radius: 2px;
          width: max-content;
          float: right;
        }
        span.then-release {
          background-color: #2cbf77;
        }
        span.ready-release {
          background-color: #50cdd0;
        }
        span.on-review {
          background-color: #ff5240;
        }
        span.remove-release {
          background-color: #ff5240;
        }
        span.been-filed {
          background-color: #6ab28f;
        }
        span.then-offline {
          background-color: #aaaaaa;
        }
        span.ready-review {
          background-color: #e6c552;
        }
        span.ready-offline {
          background-color: #ff9700;
        }
        span.on-archived {
          background-color: #3980ea;
        }
        span.on-info {
          background-color: #aaaaaa;
        }
      }
      .card-state-bottom {
        span {
          font-size: 14px;
          color: $black_tips;
          @include textEllipsis(14px, 1);
        }
      }
    }
    .wechat-card-options {
      position: absolute;
      right: 20px;
      height: 72px;
      // width: 300px;
      display: flex;
      align-items: center;
      flex-direction: row-reverse;
      &.no-width {
        width: auto;
      }
      .inner-card-options {
        .option-btn {
          i {
            color: $mainColor;
            margin-right: 2px;
          }
          &.is-disabled {
            i {
              color: #aaa;
            }
          }
        }
        .more-btn {
          i {
            font-size: 24px;
          }
        }
      }
    }
    .ruifox-card-options {
      position: absolute;
      background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, $focusContent 20%, $focusContent 100%);
      right: 20px;
      height: 72px;
      width: 310px;
      display: flex;
      align-items: center;
      flex-direction: row-reverse;
      &.no-width {
        width: auto;
      }
      .inner-card-options {
        .option-btn {
          i {
            color: $mainColor;
            margin-right: 2px;
          }
          &.is-disabled {
            i {
              color: #aaa;
            }
          }
        }
        .more-btn {
          i {
            font-size: 24px;
          }
        }
      }
    }
    // 进入后和离开前保持原位
    .state-enter-to,
    .state-leave-from,
    .options-enter-to,
    .options-leave-from {
      opacity: 1;
    }
    // 设置进入和离开过程中的动画时长0.5s
    .state-enter-to,
    .state-leave-from,
    .options-enter-active,
    .options-leave-active {
      transition: all 0.2s;
    }
    // 进入前和离开后为透明，并在右侧20px位置
    .state-enter-to,
    .state-leave-from,
    .options-enter-from,
    .options-leave-to {
      opacity: 0;
    }
    .options-enter-from {
      transform: translateX(20px);
    }
    .options-leave-to {
      transform: translateX(20px);
    }
  }
  .wechat-card + .wechat-card {
    margin-top: 10px;
  }
}
// 添加分页器样式
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  padding: 0 20px;
}
</style>